<template>
  <div class="realtimelist">
    <div class="realtimelist_main">
      <div class="real_nav">
        <div class="radiogroup">
          <el-radio-group v-model="navradio" @change="navchange">
            <el-radio :label="1">
              <div class="navbox">
                <div class="nav_img1"></div>
                <div class="nav_right">
                  <h2>实时爆单榜</h2>
                  <p>近两小时销量排行榜</p>
                </div>
              </div>
            </el-radio>
            <el-radio :label="2">
              <div class="navbox">
                <div class="nav_img2"></div>
                <div class="nav_right">
                  <h2>今日爆单榜</h2>
                  <p>今日商品销量排行榜</p>
                </div>
              </div>
            </el-radio>
            <el-radio :label="4">
              <div class="navbox">
                <div class="nav_img3"></div>
                <div class="nav_right">
                  <h2>昨日销量榜</h2>
                  <p>昨日销量排行榜</p>
                </div>
              </div>
            </el-radio>
            <el-radio :label="3">
              <div class="navbox">
                <div class="nav_img4"></div>
                <div class="nav_right">
                  <h2>总销量榜</h2>
                  <p>商品月销量榜</p>
                </div>
              </div>
            </el-radio>
            <!-- <el-radio :label="5">
              <div class="navbox">
                <div class="nav_img5">
                  <i class="iconfont icon_paihang1 iconhome"></i>
                </div>
                <div class="nav_right">
                  <h2>商品搜索榜</h2>
                  <p>搜索商品次数排行榜</p>
                </div>
              </div>
            </el-radio> -->
          </el-radio-group>
        </div>
      </div>
      <div class="goods_main" >
        <div class="goods_Box" v-show="goodsloading==false">
          <div class="goods_list" v-if="botList.length > 0" >
            <div class="goods_bot">
              <el-row :gutter="24">
                <el-col
                  :span="12"
                  class="hover_box2"
                  v-for="(item, index) in botList"
                  :key="index"
                >
                  <!-- top标签 -->
                  <div class="position_Box">
                    <i class="iconfont icon_top topimg"></i>
                    <div class="top_num">{{ index + 1 }}</div>
                  </div>
                  <el-card shadow="always" :body-style="{ padding: '0px' }">
                    <div class="top_main2">
                      <div
                        class="demo-image__lazy"
                        style="cursor: pointer;width:220px;height:220px"
                        @click="godetails(item.id)"
                      >
                        <el-image
                          class="elimg2"
                          style="width:220px;height:220px"
                          fit
                          :src="item.goods_img"
                          lazy
                        >
                          <div slot="placeholder" class="image-slot">
                            <Goodsloading></Goodsloading>
                          </div>
                        </el-image>
                      </div>
                      <div class="top_right2">
                        <div class="top_roll2" v-if="navradio == 1">
                          近2小时销量<span style="color:red;font-weight:bold">{{
                            item.goods_today_xl
                          }}</span>
                          件
                        </div>
                        <div class="top_roll2" v-if="navradio == 2">
                          今日销量<span style="color:red;font-weight:bold">{{
                            item.today_coupon_num
                          }}</span>
                          件
                        </div>
                        <div class="top_roll2" v-if="navradio == 3">
                          月销量<span style="color:red;font-weight:bold">{{
                            item.month_goods_num
                          }}</span>
                          件
                        </div>
                        <div class="top_roll2" v-if="navradio == 4">
                          昨日销量<span style="color:red;font-weight:bold">{{
                            item.yesterday
                          }}</span>
                          件
                        </div>
                        <div class="top_title2">
                          <a
                            :href="item.goods_url"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {{ item.goods_name }}
                          </a>
                        </div>
                        <div class="top_data2">
                          <div>
                            <p>{{ item.goods_after_price }}</p>
                            <p>卷后价</p>
                          </div>
                          <div>
                            <p>{{ item.commission_bl }}%</p>
                            <p>定向佣金</p>
                          </div>
                          <div>
                            <p>
                              {{
                                (
                                  item.goods_price *
                                  (item.commission_bl / 100)
                                ).toFixed(2)
                              }}
                            </p>
                            <p>佣金</p>
                          </div>
                        </div>
                        <div class="coupon_Box">
                          <a
                            style="cursor: pointer;"
                            :href="item.coupon_url"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <span>劵</span>
                            <em>¥ {{ parseInt(item.coupon_discount) }}</em>
                          </a>
                          <div>
                            月销：<span style="color:red">{{
                              item.month_goods_num
                            }}</span>
                            日销：<span style="color:red">{{
                              item.today_coupon_num
                            }}</span>
                          </div>
                        </div>
                        <!-- <el-progress
                          style="width:200px;margin: 0 auto;"
                          :percentage="
                            parseInt(
                              (
                                (parseInt(item.lg_num) / item.coupon_all_num) *
                                100
                              ).toFixed(2)
                            )
                          "
                        ></el-progress> -->
                      </div>
                      <div class="shops_Box2">
                        <div class="shops_action2">
                          <div class="action_box2">
                            <div class="join_collect2">
                              <el-button
                                class="join_btn12"
                                type="primary"
                                @click="doAddCollection(item.id)"
                              >
                                <span>
                                  加入收藏
                                </span>
                              </el-button>
                            </div>
                            <div class="copy2">
                              <el-button
                                class="join_btn22"
                                type="primary"
                                @mousedown.native="handleOk2('botli' + index)"
                                @click="handleOk('botli' + index)"
                              >
                                <span>
                                  复制文案
                                </span>
                              </el-button>
                            </div>
                            <div class="position_hover" :id="'botli' + index">
                              <!-- <el-card
                                  shadow="always"
                                  :body-style="{ padding: '10px' }"
                                > -->
                              <div class="demo-image__lazy">
                                <el-image
                                  fit
                                  :src="item.goods_img"
                                  style="width:80px"
                                >
                                </el-image>
                              </div>
                              <div>{{ item.goods_name }}</div>
                              <div>好评数:{{ item.good_review_num }} </div>
                              <div>
                                原价:{{ item.goods_price }}【卷后价:{{
                                  item.goods_after_price
                                }}】
                              </div>
                              <div>领卷:{{ item.coupon_url }}</div>
                              <div>抢购:{{ item.goods_url }}</div>
                              <div>{{ item.goods_copywriting }}</div>
                              <!-- </el-card> -->
                            </div>
                          </div>
                        </div>
                        <div class="shops_info22">
                          <div class="disflex">
                            <span class="childone">原价:</span>
                            <span class="childtwo">
                              <span style="color:red">{{
                                item.goods_price
                              }}</span>
                            </span>
                          </div>
                           
                          <div class="disflex">
                            <div
                              style="display: flex;justify-content: space-between;align-items: center;"
                            >
                              领券量:<span
                                style="color:red;margin-right:8px"
                              >{{ item.lg_num }}</span
                              >
                              优惠卷剩余:<span style="color:red">{{
                                item.coupon_surplus_num
                              }}</span>
                            </div>
                          </div>
                          
                          <div class="disflex">
                            <span class="childone">店铺:</span>
                            <span class="childtwo">{{
                              item.shop_name
                            }}</span>
                          </div>
                           
                          <div class="disflex">
                            <span class="childone">放单人:</span>
                            <span class="childtwo">{{ item.phone }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-else class="nogoods">
            <div style="padding-top:230px">
              <h3 style="margin-top: 0;padding-top: 25px;">
                抱歉，暂时没有找到合适商品
              </h3>
              <h4 style="margin-top: 0;padding-top: 10px;">
                我们会努力寻找更多的商品哦~
              </h4>
            </div>
          </div>
        </div>
        <sloading class="sloading" v-show="goodsloading==true"></sloading>
        <!-- 分页器 -->
        <!-- @size-change="handleSizeChange" -->
        <div
          style="width:100%;margin:0 auto;position: sticky;"
          v-if="botList.length > 0"
        >
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-size="80"
            :pager-count="11"
            layout="total, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </div>
      <div class="sidebar">
        <div class="pagebox">{{ currentPage }}/{{ max_page }}</div>
        <div class="btns">
          <p @click="gonext(1)">
            向上一页
          </p>
          <p @click="gonext(2)">
            向下一页
          </p>
          <p>
            <router-link to="/help">
              帮助中心
            </router-link>
          </p>
          <p>
            建议反馈
          </p>
          <p>
            <a href="tencent://message/?Site=dounm.com&uin=756589657&Menu=yes" target="_blank" rel="noopener noreferrer">联系客服</a> 
          </p>
          <p>
            一键复制
          </p>
        </div>
        <backtop
          transitionName="fade"
          :customStyle="backtopStyle" 
          :visibilityHeight="0" 
          :backPosition="0"
        ></backtop>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import footerbox from '@/components/footerbox.vue'

import Goodsloading from '@/components/Goodsloading.vue'
import sloading from '@/components/sloading.vue'
import backtop from '@/components/backtop'
import { getSelectedList, doAddCollection } from '@/api/homepage'
export default {
  name: 'Realtimelist',
  components: {
    Goodsloading,
    footerbox,
    sloading,
    backtop
  },
  data() {
    return {
      max_page:0,
        backtopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      },
      goodsloading:false,
      navradio: 1,
      currentPage: 1,
      count: 0,
      loading: true,
      goodsShow: '',
      nogoodsShow: '',
      Expand: true,
      radio: '0',
      dataid: '',
      topList: [
        // {
        //   id: 11, //商品自增id
        //   goods_name: "111", //商品名称
        //   goods_class_id: "1000010", //分类id
        //   goods_img: "11111", //图片
        //   goods_price: "200.00", //单价
        //   goods_after_price: "10.00", //卷后价
        //   commission_bl: "20", //佣金比例
        //   goods_end_time: 1596262964, //上皮到期时间
        //   status: 1,
        //   item_id: "48200997426", //商品id
        //   coupon_url:
        //     "https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeWQgN5g8COpNhO4YT8BjgABlJjrENdCosf-Xvr7CzvcgUftd4ARvnNr416wy4EB9_iVgI-w", //优惠卷链接
        //   shop_name: "京东自营店铺", //店铺名称
        //   good_review_num: "8500", //好评数
        //   today_coupon_num: 1, //今日销量
        //   lg_num: 17, //领卷数量
        //   goods_copywriting: "", //文案
        //   coupon_all_num: "", //优惠卷总量
        //   coupon_surplus_num: "", //优惠卷剩余数量
        //   coupon_discount: "", //优惠卷面值
        //   goods_today_xl: "", //商品进2小时销量
        //   month_goods_num: "", //商品月销量
        //   phone: "17339612793"
        // }
      ],
      botList: [],
      rightList: [],
      class_id: '',
      sort: 1,
      numshow: true
    }
  },

  computed: {},
  created() {
    this.getSelectedList(1, 1, 80)
  },
  mounted() {},
  methods: {
       gonext(val){
        if(val===1){
          if(this.currentPage!==1){
            this.getSelectedList(this.navradio,parseInt(this.currentPage-1),80) 
          }else{
            this.$message.info('当前已经是第一页了!')
          }
        }
        if(val===2){
          if(this.currentPage!==this.max_page&&this.currentPage<this.max_page){
            this.getSelectedList(this.navradio,parseInt(this.currentPage+1),80)
          }else{
            this.$message.info('当前已经是最后页了!')
          }
        }
      },
      ismyriad(val) {
      const str = '' + val
      if (str.length > 4) {
        return str.substring(0, str.length - 4) + '万+'
      } else {
        return val
      }
    },
    //收藏
    doAddCollection(id) {
      doAddCollection({
        collection_id: id
      })
        .then(res => {
          if (res.code == 200) {
            // // console.log("收藏返回", res);
            this.$message.success('收藏成功!')
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleOk2(val) {
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection()
        const range = document.createRange()
        // // console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)) //传入dom
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
      })
    },
    handleOk(val) {
      // console.log(val)
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection()
        const range = document.createRange()
        // console.log(document.getElementById(val))
        range.selectNode(document.getElementById(val)) //传入dom
        selection.addRange(range)
        document.execCommand('copy')
        this.$message.success('复制成功')
        selection.removeAllRanges()
      })
    },
    godetails(id) {
      // console.log(id)
      const routes = this.$router.resolve({
        path: '/jdselectgoods/goodsdetails',
        query: { id: id }
      })
      window.open(routes.href, '_blank')
    },
    navchange(val) {
      // console.log('navradio', val)
      this.getSelectedList(val, this.currentPage, 80)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.getSelectedList(this.navradio, val, 80)
    },
    //获取商品列表
    getSelectedList(type, page, pagesize) {
      this.goodsloading=true
      getSelectedList({
        type: type,
        page: page,
        pagesize: pagesize,
        is_brand:2
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('商品返回', res)
              this.count = res.data.count
              this.max_page = res.data.max_page
              this.botList = res.data.data.data
              // console.log('this.botList', this.botList)
              for(const i in this.botList){
                this.botList[i].lg_num = this.ismyriad(this.botList[i].lg_num)
              this.botList[i].coupon_surplus_num = this.ismyriad(this.botList[i].coupon_surplus_num)
              this.botList[i].today_coupon_num = this.ismyriad(this.botList[i].today_coupon_num)
              this.botList[i].month_goods_num = this.ismyriad(this.botList[i].month_goods_num)
              this.botList[i].goods_today_xl = this.ismyriad(this.botList[i].goods_today_xl)
              this.botList[i].yesterday = this.ismyriad(this.botList[i].yesterday)
              }
               this.goodsloading=false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
//
.realtimelist {
  width: 100%;
  position: relative;
  min-width: 1300px;
  // height: 800px;
  min-height: 500px;

  background: url('~@/assets/imgs/bg_line.png') no-repeat;
  // background-image: url("~@/assets/imgs/realtimebg.png");
  // background-repeat: repeat-y;
  background-size: 100% 800px;
  // background: #fff;
  // background: linear-gradient(to right,#4A88FF, #0323CE);
  // z-index: -1;

  .realtimelist_main {
    padding-top: 153px;
    width: 100%;
    min-width: 1280px;
    max-width: 1920px;
    // height: 800px;
    min-height: 500px;
    margin:0 auto;
    // background-image: url("~@/assets/imgs/realtimebg.png");
    background: url('//img.letuilm.com/2020/07/b2e5772020072914362559083.png') no-repeat center;
    background-size: 100% 800px;
    background-position:top;
    .real_nav::v-deep {
      width: 1280px;
      height: 90px;
      background-color: #fff;
      border-radius: 82px;
      margin: 0 auto;
      position: relative;

      .radiogroup {
        width: 1280px;
        position: absolute;
        top: -11px;
      }

      .el-radio-group {
        // margin-top: -11px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .el-radio__label {
        display: inline-block;
      }

      .el-radio__input {
        display: none;
      }

      .navbox {
        width: 214px;
        height: 110px;
        border-radius: 10px;
        margin: 0 auto;
        padding: 18px 0;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;

        .nav_img1 {
          width: 32px;
          height: 32px;
          background: url('~@/assets/imgs/nowblue.png') no-repeat center;
        }

        .nav_img2 {
          width: 32px;
          height: 32px;
          background: url('~@/assets/imgs/todayblue.png') no-repeat center;
        }

        .nav_img3 {
          width: 32px;
          height: 32px;
          background: url('~@/assets/imgs/yesblue.png') no-repeat center;
        }

        .nav_img4 {
          width: 32px;
          height: 32px;
          background: url('~@/assets/imgs/outblue.png') no-repeat center;
        }
        .nav_img5 {
          width: 32px;
          height: 32px;
          .iconhome {
            font-size: 32px;
            color: #548efe;
          }
        }

        .nav_right {
          vertical-align: middle;
          margin-left: 8px;

          h2 {
            font-size: 26px;
            font-weight: 700;
            margin: 0;
            padding-bottom: 5px;
          }

          p {
            font-size: 14px;
          }
        }
      }

      .navbox:hover {
        background: linear-gradient(rgba(89, 158, 253, 1), #4d77ff);
         box-shadow: 0 0 12px #4d77ff;
        .nav_right {
          color: white;
        }

        .nav_img1 {
          background: url('~@/assets/imgs/nowwhite.png') no-repeat center;
        }

        .nav_img2 {
          background: url('~@/assets/imgs/todaywhite.png') no-repeat center;
        }

        .nav_img3 {
          background: url('~@/assets/imgs/yeswhite.png') no-repeat center;
        }

        .nav_img4 {
          background: url('~@/assets/imgs/outwhite.png') no-repeat center;
        }
        .nav_img5 {
          .iconhome {
            color: white;
          }
        }
      }

      .is-checked::before {
        position: absolute;
        bottom: -11px;
        width: 0;
        height: 0;
        border-color: #4d77ff transparent transparent;
        border-style: solid;
        border-width: 12px 12px 0;
        content: '';
        left: 50%;
        margin-left: -4px;
      }

      .is-checked {
        .navbox {
          background: linear-gradient(rgba(89, 158, 253, 1), #4d77ff);
          box-shadow: 0 0 12px #4d77ff;
          .nav_right {
            color: white;
          }
        }

        .nav_img1 {
          background: url('~@/assets/imgs/nowwhite.png') no-repeat center;
        }

        .nav_img2 {
          background: url('~@/assets/imgs/todaywhite.png') no-repeat center;
        }

        .nav_img3 {
          background: url('~@/assets/imgs/yeswhite.png') no-repeat center;
        }

        .nav_img4 {
          background: url('~@/assets/imgs/outwhite.png') no-repeat center;
        }
        .nav_img5 {
          .iconhome {
            color: white;
          }
        }
      }
    }
     .sidebar {
          position: fixed;
          top: 50%;
          right: 20px;
          // border: 1px solid #E7E7E7;
          margin: 10px 0;
          width: 50px;
          border-radius: 3px;
          box-shadow: 0 0 6px #eee;
          .pagebox{
            width: 100%;
            color: #4d75ff;
            font-size: 14px;
            // padding-bottom: 6px;
            text-align: center;
            background-color: #F6F6F6;
          }
          .btns{
            display:flex;
            flex-wrap:wrap;
            background-color: #fff;
          }
          /deep/.el-icon-download{
            transform: rotate(180deg);
            border: 1px solid #E7E7E7;
            display: block;
            width: 50px;
            height: 43px;
            line-height: 40px;
            background: #fff;
            border-radius: 3px;
            font-size: 26px;
            font-weight: bold;
            color: #4d75ff;
            cursor: pointer;
            margin-top: 10  px;
            // box-shadow: 0 0 12px #eee;
          }
          p {
            display: block;
            width: 100%;
            font-size: 12px;
            color: #666;
            border-top: 1px solid #E7E7E7;
            padding: 6px 6px;
            letter-spacing: 2px;
            text-align: center;
            cursor: pointer;
          }
          p:hover{
            color: #4d75ff;
          }
        }
  }
}
@keyframes landr {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom 0;
  }

  39% {
    transform: rotate(5deg);
    transform-origin: right bottom 0;
  }

  40% {
    transform: rotate(5deg);
    transform-origin: left bottom 0;
  }

  75% {
    transform: rotate(-10deg);
    transform-origin: left bottom 0;
  }

  100% {
    transform: rotate(0deg);
    transform-origin: left bottom 0;
  }
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.loading {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}

.goods_Box {
  width: 100%;
  .goods_list {
    margin: 0 auto;
    width: 1200px;
    padding-top: 40px;

    .goods_bot {
      position: relative;

      .hover_box2 {
        position: relative;
        width: 243px;
        border-radius: 12px;
        margin-bottom: 20px;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        flex-wrap: wrap;
        /deep/.el-card {
          border: none;
        }
        .topimg2 {
          position: absolute;
          top: -8px;
          left: 20px;
          z-index: 2;
        }

        .top_num2 {
          position: absolute;
          top: 18px;
          left: 43px;
          font-size: 23px;
          color: #ffffff;
          z-index: 3;
        }

        // .elimg2 {
        //   width: 220px;
        //   // height: 220px;
        // }
        .top_main2 {
          background-color: #fff;
          .top_right2 {
            padding-top: 10px;
            // width: 220px;
            font-size: 13px;
            margin: 0 auto;
            padding-bottom: 20px;

            .top_title2 {
              width: 200px;
              // height: 33px;
              margin: 3px auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-top: 8px;
              padding-bottom: 8px;
              font-size: 16px;

              a {
                color: #000;
                // font-size: 14px;
                text-decoration: none;
              }
              a:hover {
                color: blue;
              }
            }

            .top_roll2 {
              padding-top: 8px;
              padding-bottom: 8px;
              width: 150px;
              // height: 25px;
              line-height: 25px;
              border-radius: 8px;
              margin: 0 auto;
              background-color: rgba(148, 144, 144, 0.1);

              span {
                font-size: 16px;
                margin-left: 5px;
                margin-right: 5px;
                color: #ff4215;
                font-weight: bold;
              }
            }

            .top_data2 {
              height: 70px;
              font-size: 13px;
              display: flex;
              justify-content: space-around;
              align-items: center;

              p {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
              }

              p:first-child {
                color: #333;
                font-size: 16px;
                font-weight: bold;
              }
            }
          }
        }

        .shops_Box2 {
          // width: 100%;
          .shops_action2 {
            position: absolute;
            top: 220px;
            left: 13px;
            z-index: -11;
            opacity: 0;
            transition: all 1s initial;

            .action_box2 {
              width: 217px;
              display: flex;
              justify-content: center;
              align-items: center;

              .join_collect2 {
                background: linear-gradient(
                  0deg,
                  rgba(89, 158, 253, 0.8),
                  rgba(77, 116, 255, 0.8)
                );
                font-size: 16px;
                overflow: hidden;
                border-top-left-radius: 10px;

                .join_btn12 {
                  padding: 7px 20px;
                  border: none;
                  margin: 0 auto;
                }
              }

              .join_collect2:hover {
                opacity: 0.8;
                span {
                  color: #fff;
                }
              }

              .copy2 {
                background: linear-gradient(
                  0deg,
                  rgba(89, 158, 253, 0.8),
                  rgba(77, 116, 255, 0.8)
                );
                font-size: 16px;
                overflow: hidden;
                border-top-right-radius: 10px;

                .join_btn22 {
                  padding: 7px 20px;
                  border: none;
                }
              }

              .position_hover {
                border-radius: 12px;
                box-sizing: border-box;
                padding: 10px;
                color: white;
                background-color: #00000075;
                display: none;
                position: absolute;
                top: -100px;
                left: 225px;
                width: 300px;
                text-align: left;
                // word-break: keep-all;
                // white-space: nowrap;
                font-size: 12px;
                opacity: 0;
                z-index: -999;
                text-align: justify;
                text-justify: newspaper;
                word-break: break-all;
                .elimghover {
                  width: 80px;
                }
              }

              .copy2:hover + .position_hover {
                display: block;
                opacity: 1;
                z-index: 999999;
              }

              .copy2:hover {
                opacity: 0.8;
                span {
                  color: #fff;
                }
              }
            }
          }

          .shops_info22 {
            position: absolute;
            top: 370px;
            left: 12px;
            width: 219px;
            font-size: 12px;
            background-color: #fff;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            z-index: -1;
            border-bottom: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            transition: all 1s initial;
            padding-bottom: 12px;
            text-align: left;
            // display: flex;
            // align-items: center;

            div {
              width: 100%;
              padding-top: 5px;
            }
          }
        }
      }

      .hover_box2:hover {
        .shops_Box2 {
          .shops_action2 {
            transition: all 300ms ease;
            -moz-transition: all 300ms ease;
            -webkit-transition: all 300ms ease;
            top: 192px;
            opacity: 1;
            z-index: 6;
          }

          .shops_info22 {
            transition: all 300ms ease;
            -moz-transition: all 300ms ease;
            -webkit-transition: all 300ms ease;
            top: 440px;
            opacity: 1;
            z-index: 5;
          }
        }
      }
    }

    /* 公共样式 */
    // 优惠卷
    .coupon_Box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 25px;
      line-height: 25px;
      margin-bottom: 10px;
      a {
        float: left;
        font-size: 0;
        cursor: pointer;
        margin-top: 1px;
        span {
          display: inline-block;
          padding: 0 3px;
          background: #fd7100;
          color: #fff;
          font-size: 12px;
          background: linear-gradient(
            0deg,
            rgba(255, 75, 66, 1),
            rgba(255, 117, 60, 1)
          );
          height: 20px;
          vertical-align: middle;
          line-height: 20px;
        }
        em {
          display: inline-block;
          padding: 0 2px;
          border: 1px solid #fd7100;
          color: #fd7100;
          font-size: 12px;
          height: 20px;
          vertical-align: middle;
          line-height: 18px;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      div {
        font-size: 13px;
        color: gray;
      }
    }
    //角标
    .position_Box {
      position: relative;
      .topimg {
        font-size: 44px;
        color: #ff5c40;
        position: absolute;
        top: -5px;
        left: 15px;
        z-index: 2;
      }

      .top_num {
        position: absolute;
        width: 30px;
        top: 16px;
        left: 22px;
        font-size: 18px;
        color: #ffffff;
        z-index: 3;
        text-align: center;
      }
    }
    .disflex {
      display: flex !important;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 10px;
      text-align: left;

      .childone {
        display: inline-block;
        margin-right:8px ;
        // width: 150px !important;
      }

      .childtwo {
        text-align: right;
        white-space: nowrap;
      }
    }
  }
  .nogoods {
    width: 1200px;
    height: 484px;
    border-radius: 12px;
    // line-height: 200px;
    background: url('~@/assets/imgs/nogoods.png') no-repeat center;
    background-position-y: 20px;
    // background-color: #ecfbf6;
    background-color: #f6f6f6;
    position: sticky;
    margin: 0 auto;
    div {
      margin-top: 60px;
    }
  }
}
</style>
